<template>
	<view class="rich">
		<view class="content flex_c">

			<view class="title flex_center">
				<i class="left"></i>
				<text>等级说明</text>
				<i class="right"></i>
			</view>
			<view class="text">Lv等级是你在平台消费金额对应的等级，等级越高象征着你的财富力越高。</view>

			<view class="title flex_center">
				<i class="left"></i>
				<text>等级提升</text>
				<i class="right"></i>
			</view>
			<view class="text">房间打赏、一对一私聊打赏、开通贵族、商城购买道具、开守护等消费行为都可提升等级。</view>

			<view class="title flex_center">
				<i class="left"></i>
				<text>等级提升</text>
				<i class="right"></i>
			</view>
			<view class="text">
				<view>・等级越高可获得的特权和福利越多</view>
				<view>・图【专属徽章】昵称前展示该勋章，彰显你的财富力</view>
				<view>・图【特权礼物】等级越高，可使用的特权礼物越多</view>
				<view>・图【炫彩昵称】等级越高，昵称越炫酷</view>
				<view>・图【头像框】专属头像框和限定头像框</view>
				<view>・图【升级飘屏】房间内或私聊页面 v等级升级，获得飘屏</view>
				<view>・图【进场欢迎】带有身份象征的勋章，Lv1-Lv40均可获得勋章，可以通过消费提升等级，下一阶段有更炫酷的勋章等你</view>
			</view>


			<view class="table">
				<view class="list flex_center grey">
					<view class="item flex_r_around right_border bottom_border">
						<text>Lv.1-Lv.10</text>
						<view class="image">
							<view>Lv.1</view>
							<image :src="$util.prefix('live/live_level_1.png')"></image>
						</view>
					</view>
					<view class="item flex_r_around bottom_border">
						<text>Lv.11-Lv.20</text>
						<view class="image">
							<view>Lv.11</view>
							<image :src="$util.prefix('live/live_level_2.png')"></image>
						</view>
					</view>
				</view>
				<view class="list flex_center white">
					<view class="item flex_r_around right_border bottom_border">
						<text>Lv.21-Lv.25</text>
						<view class="image">
							<view>Lv.21</view>
							<image :src="$util.prefix('live/live_level_3.png')"></image>
						</view>
					</view>
					<view class="item flex_r_around bottom_border">
						<text>Lv.26-Lv.30</text>
						<view class="image">
							<view>Lv.26</view>
							<image :src="$util.prefix('live/live_level_4.png')"></image>
						</view>
					</view>
				</view>
				<view class="list flex_center grey">
					<view class="item flex_r_around right_border">
						<text>Lv.31-Lv.35</text>
						<view class="image">
							<view>Lv.31</view>
							<image :src="$util.prefix('live/live_level_5.png')"></image>
						</view>
					</view>
					<view class="item flex_r_around">
						<text>Lv.36-Lv.40</text>
						<view class="image">
							<view>Lv.36</view>
							<image :src="$util.prefix('live/live_level_6.png')"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="title flex_center">
				<i class="left"></i>
				<text>等级变灰</text>
				<i class="right"></i>
			</view>
			<view class="text">以上等级永久有效，但连续7天未消费，等级勋章颜色置灰，消费任意金额恢复点亮</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding: 0 42rpx 60rpx;

		.title {
			margin: 44rpx 0 32rpx;

			text {
				text-align: center;
				line-height: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFF;
				margin: 0 32rpx;
			}

			i {
				width: 52rpx;
				height: 4rpx;
				border-radius: 2rpx;
			}

			.left {
				background: #333333;
			}

			.right {
				background: #333333;
			}

		}

		.text {
			font-size: 24rpx;
			color: #CCCCCC;
			line-height: 34rpx;

			view {
				font-size: 24rpx;
				color: #CCCCCC;
				line-height: 34rpx;
			}
		}

		.table {
			width: 100%;
			margin-top: 32rpx;
			// border: 4rpx solid #F1F1F1;
			border-radius: 24rpx;
			overflow: hidden;

			// .white {
			// 	background: #FFF;
			// }

			// .grey {
			// 	background: #f8f8f8;
			// }
			
			

			.list {
				
				// .right_border {
				// 	border-right: 4rpx solid #F1F1F1;
				// }
				
				// .bottom_border {
				// 	border-bottom: 4rpx solid #F1F1F1;
				// }
				
				.item {
					height: 72rpx;
					flex: 1;
					background: linear-gradient( 180deg, #24253A 0%, #1A1D2E 100%);
					overflow: hidden;

					text {
						font-size: 26rpx;
						color: #666666;
						line-height: 36rpx;
					}
					
					.image {
						width: 116rpx;
						height: 36rpx;
						position: relative;
						image {
							position: absolute;
							top: 0;
							left: 0;
							width: 116rpx;
							height: 36rpx;
						}
						view {
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 36rpx;
							text-align: right;
							position: relative;
							z-index: 2;
							padding-right: 10rpx;
						}
					}

					
				}
			
			}
		}

	}
</style>